<template>
	<view class="addNewAddress">
		<view class="info">
			<uni-section>
				<view class="example">

					<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
						<uni-forms-item label="联系人" required name="name">
							<uni-easyinput v-model="customFormData.name" placeholder="姓名" />
						</uni-forms-item>
						<uni-forms-item label="性别" required name="sex">
							<uni-data-checkbox v-model="customFormData.sex" :localdata="customFormData.sexs" />
						</uni-forms-item>
						<uni-forms-item label="电话" required name="phone">
							<uni-easyinput v-model="customFormData.phone" placeholder="手机号" />
						</uni-forms-item>
						<uni-forms-item label="请选择" required name="address" label-width='140'>
							<pickerRegion @getRegion="regionChange">
								<view class="pickerCon" style="height:30px;line-height:30px">
									<text v-if="address">{{address}}</text>
									<text style="color: #999;" v-else>请选择所在地区</text>
									
								</view>
							</pickerRegion>
							
							<!-- <uni-data-picker placeholder="请选择省" popup-title="请选择所在地区" :localdata="dataTree" :clear-icon=false
								v-model="classes" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
								@popupclosed="onpopupclosed">
							</uni-data-picker> -->

						</uni-forms-item>
						<uni-forms-item label="地址" required name="address">
							<uni-easyinput v-model="customFormData.address" placeholder="服务地址" />
						</uni-forms-item>
						<!-- <uni-forms-item label="门牌号">
							<uni-easyinput v-model="customFormData.site" placeholder="1号楼2单元202" />
						</uni-forms-item> -->
						<uni-forms-item label="设为默认地址" label-width='140'>
							<view class="uni-list-cell uni-list-cell-pd">
								<view class="uni-list-cell-db"> </view>
								<switch :checked="customFormData.isDefault" style="transform:scale(0.7)"
									@change="switchChange" />
							</view>
						</uni-forms-item>

						<!-- checcustomFormData.isDefault==1 -->
					</uni-forms>
					<button style="margin-top:50px" type="primary" @click="submit">保存</button>
					<button style="margin-top:50px" type="danger" @click="deleteFun">删除</button>
				</view>
			</uni-section>
		</view>


	</view>
</template>

<script setup>
	// import provinceData from '../../../static/area.js';
	import pickerRegion from '@/components/regionSelect/region.vue'
	import {dataTree} from '@/pages/tab/data.js'
	import {
		ref
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const customForm = ref()
	const address = ref()
	const addressId = ref()
	const classes = ref('-1')
	const customFormData = ref({
		name: '',
		sex: 2,
		sexs: [{
			text: '男',
			value: 0
		}, {
			text: '女',
			value: 1
		}, ],
		phone: '',
		address: '',
		province: '',
		city: '',
		area: '',
		provinceCode: '',
		cityCode: '',
		areaCode: '',
		isDefault: false

	})
	const customRules = ref({
		name: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		phone: {
			// rules: [{
			// 	required: true,
			// 	errorMessage: '请输入正确的手机号'
			// }],
			rules: [{
				required: true,
				errorMessage: '请填写手机号码'
				
			}, {
				validateFunction: function(rule, value, data, callback) {
					let iphoneReg = (
						/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
					); //手机号码
					if (!iphoneReg.test(value)) {
						callback('手机号码格式不正确，请重新填写')
					}
				}
			}]
		},
		address: {
			rules: [{
				required: true,
				errorMessage: '请选择详细地址'
			}],
		}
	})
	onLoad((options) => { //获取路由参数
		console.log(options.address)
		addressId.value = options.address
		queryAddressListFun()
		
	
	})
	const onnodeclick = (e) => {

		console.log(e);
		 
		
	}
	const onpopupopened = (e) => {
		console.log('popupopened');
	}
	const onpopupclosed = (e) => {
		console.log('popupclosed');
	}
	const onchange = (e) => {
		console.log('onchange:', e);
		customFormData.value.province = e.detail.value[0].text
		customFormData.value.city = e.detail.value[1].text
	}
	const queryAddressListFun = () => {
		proxy.sjuRequest.request("/api/weChatMall/address/getAddressById/" + addressId.value, 'post').then(res => {
			console.log(res.data)
			customFormData.value.name = res.data.realname
			customFormData.value.sex = Number(res.data.telphone2)
			customFormData.value.phone = res.data.telephone
			customFormData.value.address = res.data.detailedAddress
			customFormData.value.isDefault = res.data.isDefaultAddress
			customFormData.value.province = res.data.province
			customFormData.value.city = res.data.city
			customFormData.value.area = res.data.area
			customFormData.value.provinceCode = res.data.provinceCode
			customFormData.value.cityCode = res.data.cityCode
			customFormData.value.areaCode = res.data.areaCode
			address.value = res.data.province + res.data.city + res.data.area
			console.log(customFormData.value.isDefault)
		})

	}
	const switchChange = (e) => {
		console.log('switch1 发生 change 事件，携带值为', e.detail.value)
		customFormData.value.isDefault = e.detail.value
	}
	const regionChange = (res) => {
		// console.log(res)
		console.log(res[0].name + res[1].name + res[2].name)
		address.value = res[0].name + res[1].name + res[2].name;

		customFormData.value.province = res[0].name
		customFormData.value.city = res[1].name
		customFormData.value.area = res[2].name
		customFormData.value.provinceCode = res[0].code
		customFormData.value.cityCode = res[1].code
		customFormData.value.areaCode = res[2].code
		console.log(res[0].code + res[1].code + res[2].code)

	}
	const submit = () => {
		customForm.value.validate().then(res => {
			console.log('success', res);
			console.log(customFormData.value)
			// uni.showToast({
			// 	title: `校验通过`
			// })
			proxy.sjuRequest.request("/api/weChatMall/address/editRealnameAddress", 'post', {
				"realname": customFormData.value.name,
				"telephone": customFormData.value.phone,
				"isDefaultAddress": customFormData.value.isDefault,
				"province": customFormData.value.province,
				"provinceCode": customFormData.value.provinceCode,
				"city": customFormData.value.city,
				"cityCode": customFormData.value.cityCode,
				"area": customFormData.value.area,
				"areaCode": customFormData.value.areaCode,
				"detailedAddress": customFormData.value.address,
				"telphone2": customFormData.value.sex,
				"userId": proxy.sjuLogin.getValue("miaoMaGJOpenid"),
				"id": addressId.value,
			}).then(res => {
				console.log(res)
				proxy.sjuAlert.showAndRedirect('修改成功', '提示', () => {
					console.log('fanhui')
					proxy.sjuNav.navigateBack()
				})


			})
		}).catch(err => {
			console.log('err', err);
		})
	}
	const deleteFun = () => {

		proxy.sjuRequest.request("/api/weChatMall/address/deleteRealnameAddress/" + addressId.value, 'post').then(
			res => {
				proxy.sjuAlert.showAndRedirect('删除成功', '提示', () => {
					console.log('fanhui')
					proxy.sjuNav.navigateBack()
					proxy.sjuLogin.clearKey('realname')
					proxy.sjuLogin.clearKey('telephone')
					proxy.sjuLogin.clearKey('province')
					proxy.sjuLogin.clearKey('city')
					proxy.sjuLogin.clearKey('area')
					proxy.sjuLogin.clearKey('detailedAddress')
					proxy.sjuLogin.clearKey('isDefaultAddress')
				})
			})
	}
</script>

<style lang="scss" scoped>
	::v-deep .input-value-border {
		border: none
	}
	.addNewAddress {
		
		::v-deep .dialog-close{
			display: none;
		}
		width: 100%;
		height: 100%;
		background-color: #FAFAFA;

		.info {
			width: 100%;
			height: auto;
			background: #fff;
			padding: 20rpx;
			box-sizing: border-box;

			::v-deep .uni-forms-item {
				border-bottom: 1px solid #EBEBEB;
				margin: 10px 0;
			}

			::v-deep .is-input-border {
				border: none
			}
		}
	}
</style>